<template>
    <div class="login-container">
        <!-- 图标容器 -->
        <div class="icon-wrapper" @click="handleIconClick">
            <el-tag class="login-text" size="mini" type="success">
                <img src="../../../assets/logo/anquan.png" alt="" class="anquan">
                {{ showQrCode ? '切换账号登录' : '使用微信扫码登录' }}
            </el-tag>
            <!-- 微信图标 -->
            <div class="icons" v-show="!showQrCode">
                <img src="../../../assets/logo/erweima.png" alt="" class="icon">
            </div>
            <!-- 电脑图标 -->
            <div class="icons" v-show="showQrCode">
                <img src="../../../assets/logo/diannao.png" class="icon" alt="">
            </div>
        </div>

        <!-- 登录表单内容 -->
        <!-- ... 你的其他登录表单代码 ... -->

        <!-- 二维码弹窗 -->
        <!-- <el-dialog 
        :visible.sync="showQrDialog" 
        title="微信扫码登录"
        width="350px"
        custom-class="qr-dialog"
      > -->
        <!-- <img 
          src="@/assets/wechat-qr.png" 
          alt="微信二维码"
          class="qr-image"
        /> -->
        <!-- <p class="qr-tip">请使用微信扫一扫登录</p>
      </el-dialog> -->
    </div>
</template>

<script>
export default {
    props: {
        showQrCode: {
            default: false,
            type: Boolean
        }
    },
    data() {
        return {
            showQrDialog: false,
        }
    },
    methods: {
        handleIconClick() {
            // this.showQrDialog = true
            // this.showQrCode = !this.showQrCode
            this.$emit('showQrCodeChange')
        },
    }
}
</script>

<style scoped>
.login-container {
    position: relative;
    width: 400px;
    padding: 10px;
    /*background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1); */
}

.icon-wrapper {
    position: absolute;
    right: 25px;
    top: -20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* transition: all 0.3s ease; */
}

/* .icon-wrapper:hover {
    transform: translateX(5px);
  } */

.half-masked-icon {
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 遮罩效果 */
.half-masked-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), #fff);
}

.wechat-icon path {
    fill: #07c160;
    /* 微信绿色 */
}

.pc-icon path {
    fill: #409EFF;
    /* element UI 主色 */
}

.login-text {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* 弹窗样式 */
.qr-image {
    width: 100%;
    margin-bottom: 15px;
}


.icons {
    width: 30px;
    height: 30px;
}

.icon {
    width: 30px;
    height: 30px;
}

.anquan {
    width: 12px;
    height: 12px;
}

/* 遮罩层（直角三角形） */
.icons::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    /* 半透明黑色遮罩 */

    /* 核心代码：用 clip-path 裁剪出左下直角三角形 */
    clip-path: polygon(0 0,
            /* 左上角 */
            0 100%,
            /* 左下角 */
            100% 100%
            /* 右下角 */
        );

    /* 可选：添加过渡动画 */
    transition: all 0.3s;
}

/* 鼠标悬停时调整遮罩透明度 */
.icons:hover::after {
    background: rgba(0, 0, 0, 0.3);
}

/* 内容样式（用于演示可见性） */
</style>